<template>
  <div>
    <!-- 第一排 -->
    <div class="row">
      <div class="data1">
        <div class="name">水贝金</div>
        <div class="textR">859.16</div>
        <div>点差：1</div>
      </div>
      <div class="data2">
        <div class="name flex1">上期</div>
        <div class="textR flex1">86678</div>
        <div class="flex1 textR">点差：0.02</div>
      </div>
      <div class="data3">
        <div class="name" style="flex: 1">MT4</div>
        <div class="textR" style="flex: 2">86678</div>
        <div class="textR" style="flex: 2">86678</div>
        <div style="flex: 2" class="textR">点差：0.02</div>
      </div>
    </div>
    <!-- 第二排 -->

    <div class="row">
      <div style="flex: 1"></div>
      <div class="data2">
        <div class="name flex1">上期</div>
        <div class="textR flex1">86678</div>
        <div class="flex1 textR" style="color: red">+1.5</div>
      </div>
      <div class="data3">
        <div class="name" style="flex: 1">MT4</div>
        <div class="textR" style="flex: 2"></div>
        <div class="textR" style="flex: 2">13.22315</div>
        <div style="flex: 2; color: red" class="textR">+1.5</div>
      </div>
    </div>
    <!-- 第三排 -->

    <div class="row">
      <div class="data1">
        <div class="name">汇率</div>
        <div class="textR">7.12</div>
        <div></div>
      </div>
      <div class="data2">
        <div class="flex1">基差5日均值</div>
        <div class="flex1 textR">5.88</div>
        <div class="flex1"></div>
      </div>
      <div class="data3">
        <div class="name" style="flex: 3">基差5日均值</div>
        <div class="textR flex1" style="flex: 2">86678</div>
        <div class="flex1" style="flex: 2"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top",
};
</script>
<style scoped lang="scss">
.row {
  display: flex;
  .data1,
  .data2,
  .data3 {
    flex: 1;
    display: flex;
    overflow: hidden;
    div {
      flex: 2;
      height: 40px;
      line-height: 40px;
      padding: 0 5px;
      font-size: 0.7em;
      white-space: nowrap;
      overflow: hidden;
      font-weight: 700;
    }

    .name {
      flex: 1;
    }
    .flex1 {
      flex: 1;
    }
  }

  .data1 {
    background: #ffff00;
  }
  .data2 {
    background: #fce4d6;
  }
  .data3 {
    background: #e2efda;
  }
  .textR {
    text-align: right;
  }
}
</style>
